<template>
	<view class="my-content">
		<u-navbar :title="$t('邮件助手')" :custom-back="back" :title-bold="true">
			<template v-slot:right>
				<view @click="checkDate" class="u-margin-right-30">
					<u-icon name="calendar" size="45" color="#ff7348"></u-icon>
				</view>
			</template>
		</u-navbar>
		<view class="card padding bgWhite u-flex chartBar u-margin-bottom-30">
			<view class="charts">
				<view style="height: 300rpx;">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
				<view>{{$t("邮件送达率")}}</view>
			</view>
			<u-line length="140" class="u-margin-left-40 u-margin-right-40" direction="col" color="#cccccc"></u-line>
			<view class="charts">
				<view style="height: 300rpx;">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
				<view>{{$t("邮件打开率")}}</view>
			</view>
		</view>
		<view class="u-flex numberBox u-margin-bottom-30">
			<view class="card bgWhite padding-sm u-flex-1">
				<view>{{$t("发送记录")}}</view>
				<view class="number">2</view>
			</view>
			<view class="card bgWhite padding-sm u-flex-1">
				<view>{{$t("邮件总数")}}</view>
				<view class="number">2</view>
			</view>
			<view class="card bgWhite padding-sm u-flex-1">
				<view>{{$t("已送达")}}</view>
				<view class="number">2</view>
			</view>
			<view class="card bgWhite padding-sm u-flex-1">
				<view>{{$t("对方已读")}}</view>
				<view class="number">2</view>
			</view>
		</view>

		<view class="card padding bgWhite">
			<view class="cardTitle">{{$t("邮件情况概览")}}</view>
			<view style="height: 400rpx;">
				<qiun-data-charts type="line" :opts="optsByLine" :chartData="chartDataByLine" />
			</view>
		</view>


		<view class="u-margin-top-20">
			<u-cell-group>
				<u-cell-item :title="$t('发件人管理')"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-margin-top-20">
			<u-cell-group>
				<u-cell-item :title="$t('邮件主题管理')"></u-cell-item>
			</u-cell-group>
		</view>


		<view class="footer u-flex padding">
			<u-button type="primary" :custom-style="customStyle1" hover-class="none" @click="toMyTemplate"
				class="u-margin-right-20">
				{{$t("我的模板")}}
			</u-button>
			<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="toSendEmal">
				{{$t("去发邮件")}}
			</u-button>
		</view>
		<u-calendar v-model="show" mode="date" @change="dateChange"></u-calendar>
	</view>
</template>

<script>
	// 全局引入uCharts图表
	export default {
		data() {
			return {
				show: false,
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '15rpx',
					'width': '280rpx',
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '15rpx',
					'width': '280rpx',
					color: '#ff4a17',
					'border': '1px solid #ff4a17'
				},
				chartData: {},
				chartDataByLine: {},
				opts: {
					color: ["#ff6908"],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 22,
						color: "#000"
					},
					subtitle: null,
					extra: {
						arcbar: {
							type: "circle",
							width: 25,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom",
							customColor: ["#ffad4c"],
						}
					},
				},
				optsByLine: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [25, 0, 0, 0],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					},
				},
			};
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			dateChange(e){
				console.log(e.result);
				//选择完日期查询数据
			},
			checkDate() {
				this.show = true;
			},
			back(e) {
				uni.navigateBack()
			},
			toMyTemplate() {
				this.$u.route({
					url: 'pages/getCustomer/myTemplate/myTemplate'
				})
			},
			toSendEmal() {
				this.$u.route({
					url: 'pages/getCustomer/sendEmail/sendEmail'
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							name: "正确率",
							data: 0.8
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));



					let resByLine = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: this.$t("全部"),
								lineType: "dash",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: this.$t("已送达"),
								data: [70, 40, 65, 100, 44, 68]
							},
							{
								name: this.$t("已读"),
								data: [100, 80, 95, 150, 112, 132]
							}
						]
					};
					this.chartDataByLine = JSON.parse(JSON.stringify(resByLine));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 20rpx 30rpx;

		.padding {
			padding: 20rpx 30rpx;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			justify-content: space-between;
			width: 100%;
		}

		.padding-sm {
			padding: 20rpx 24rpx;
		}

		.card {
			border-radius: 15rpx;
			box-shadow: 0rpx 10rpx 20rpx #eee;
		}

		.cardTitle {
			font-size: 30rpx;
			font-weight: 800;
		}

		.bgWhite {
			background: #fff;
		}

		.numberBox {
			justify-content: space-between;
			text-align: center;

			&>view {
				margin-right: 20rpx;

				&:nth-child(4) {
					margin: 0;
				}
			}

			.number {
				margin-top: 10rpx;
				font-size: 38rpx;
				font-weight: bolder;
				color: #ff4a17;
			}
		}

		.chartBar {
			justify-content: center;
			align-items: center;

			.charts {
				flex: 40;
				overflow: hidden;
				text-align: center;
			}
		}
	}
</style>